<!--该页面是添加师傅出诊的页面-->
<template>
  <div class="out-box">
    <!--      顶部的关于店铺专科的选择-->
    <div class="top-row-box">
      <div class="info-in-box margin-right">
        <span class="title">店铺：</span>
        <el-select v-model="selectMassageID" placeholder="请选择" style="width: 70%;"
                   @change="getMassageDepartmentList">
          <el-option
            v-for="item in massageData"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="info-in-box margin-right">
        <span class="title">日期：</span>
        <el-date-picker @change="getAllOutCallList()"
          v-model="dateOutCall"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>

      <el-button type="primary" style="width: 70px;height: 90%;" @click="getAllOutCallList()">查询</el-button>
    </div>
    <!--      表格位置-->
    <div class="button-table-box">
      <div class="button-box">
        <el-button type="primary" size="small" icon="el-icon-circle-plus"
                   class="add-button" @click="dialogFormVisible = true;isEdit = false">添加
        </el-button>
      </div>
      <table-list :tableAllData="tableAllData" @getTableData="getTableData" ref="tableList"></table-list>
      <page-pagination :page-list="pageList" ref="pagePagination"></page-pagination>
    </div>
    <!--     添加出诊计划弹出框-->
    <el-dialog title="添加" :visible.sync="dialogFormVisible" width="35%" @close="cancelModal"
               v-loading="isLoading">
      <el-form>
        <el-form-item label="师傅ID：" label-width="120px">
          <span class="gray-text">{{ selectDoctorID }}</span>
        </el-form-item>
        <el-form-item label="师傅姓名：" label-width="120px">
          <el-select v-model="selectDoctorID" placeholder="请选择" style="width: 70%;">
            <el-option
              v-for="item in doctorSelectData"
              :disabled="isExist(item.name)"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺：" label-width="120px">
          <el-select v-model="selectMassageID" disabled="true" placeholder="请选择店铺" style="width: 70%;">
            <el-option
              v-for="item in massageData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--        选择出诊日期 以星期的形式-->
        <el-form-item label="出诊日期：" label-width="120px">
          <el-select multiple collapse-tags v-model='selectedVisitCallDate' @change='changeSelect'
                     @remove-tag='removeTag' placeholder='请选择出诊日期' style="width: 70%;">
            <el-option label='全选' value='全选' @click.native='selectAll'></el-option>
            <el-option v-for='item in visitCallDate.date' :key='item.ID' :label='item.name'
                       :value='item.ID'></el-option>
          </el-select>
        </el-form-item>
        <!--            添加出诊时间段-->
        <el-form-item label="时间段：" label-width="120px">
          <el-select multiple collapse-tags v-model='selectedVisitCallTime' @change='changeSelect1'
                     @remove-tag='removeTag1' placeholder='请选择时间段' style="width: 56%;">
            <el-option label='全选' value='全选' @click.native='selectAll1'></el-option>
            <el-option v-for='item in visitCallTime.date' :key='item.ID' :label='item.time'
                       :value='item.time'></el-option>
          </el-select>
          <!--          编辑时间段按钮-->
          <el-button icon="el-icon-edit" circle style="margin-left:5px;font-size: 10px;"
                     @click="editTimePeriod('date')"></el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button type="primary" @click="addOutCall()">确 定</el-button>
      </div>
    </el-dialog>

    <!--    编辑时间段模态框-->
    <el-dialog title="修改时间段" :visible.sync="editTimePeriodDialog" width="35%" @close="cancelModal1"
               v-loading="isLoading">
      <el-form>
        <el-button icon="el-icon-circle-plus-outline" v-if="isShowAddTimeButton" @click="changeIsShowAddTimePeriod">
          添加时间段
        </el-button>
        <!--        添加时间段的组件-->
        <el-time-picker
          is-range
          editable
          v-if="isShowAddTimePeriod"
          v-model="timePeriod"
          @change="addTimePeriod"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
        <!--        改变时间段的组件-->
        <el-time-picker
          is-range
          editable
          v-if="isShowChangeTimePeriod"
          v-model="timePeriod1"
          @change="changeTimePeriod"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
        <!--        时间段的表格-->
        <table-list :tableAllData="timePeriodTableData" @getTableData="getTableData1" ref="tableList"></table-list>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal1">取 消</el-button>
        <el-button type="primary" @click="saveEditTimePeriod">确 定</el-button>
      </div>
    </el-dialog>


    <!--     修改出诊计划弹出框-->
    <el-dialog title="修改" :visible.sync="updateDialog" width="35%" @close="cancelModal"
               v-loading="isLoading">
      <el-form>
        <el-form-item label="师傅ID：" label-width="120px">
          <span class="gray-text">{{ updateForm.doctorId }}</span>
        </el-form-item>
        <el-form-item label="师傅姓名：" label-width="120px">
          <span class="gray-text">{{ updateForm.doctorName }}</span>
        </el-form-item>
        <el-form-item label="店铺：" label-width="120px">
          <el-select v-model="updateForm.clinicId" placeholder="请选择店铺" style="width: 70%;">
            <el-option
              v-for="item in sentTableData.address"
              :key="item.id"
              :label="item.address"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--        选择出诊日期 以星期的形式-->
        <el-form-item label="出诊日期：" label-width="120px">
          <el-select multiple collapse-tags v-model='selectedVisitCallDate' @change='changeSelect'
                     @remove-tag='removeTag' placeholder='请选择出诊日期' style="width: 70%;">
            <el-option label='全选' value='全选' @click.native='selectAll'></el-option>
            <el-option v-for='item in visitCallDate.date' :key='item.ID' :label='item.name'
                       :value='item.ID'></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间段：" label-width="120px">
          <el-select multiple collapse-tags v-model='selectedVisitCallTime' @change='changeSelect1'
                     @remove-tag='removeTag1' placeholder='请选择时间段' style="width: 57%;">
            <el-option label='全选' value='全选' @click.native='selectAll1'></el-option>
            <el-option v-for='item in visitCallTime.editDate' :key='item.ID' :label='item.time'
                       :value='item.time'></el-option>
          </el-select>
          <!--          编辑时间段按钮-->
          <el-button icon="el-icon-edit" circle style="margin-left:5px;font-size: 10px;"
                     @click="editTimePeriod('editDate')"></el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button type="primary" @click="handleUpdate()">确 定</el-button>
      </div>
    </el-dialog>
    <!--请假弹框-->
    <el-dialog title="请假" :visible.sync="showHoliday" width="40%" @close="cancelModal"
               v-loading="isLoading">
      <el-form>
        <el-form-item label="请假日期:" label-width="120px">
          <span class="gray-text">{{ holidayList }}</span>
        </el-form-item>
        <el-form-item label="本周:" label-width="120px">
          <div class="top-select-date">
            <el-checkbox-group v-model="holidayList" size="small" >
              <el-checkbox-button v-for="(item,index) in dateList" @change="sortDateList" :label="item.year+'-'+item.month+'-'+item.date" :key="index">
                <span class="day">{{ item.day }}</span>
                <span class="date" v-if="index === 0">今</span>
                <span class="date" v-else>{{ item.date }}</span>
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
        </el-form-item>

        <el-form-item label="下周:" label-width="120px">
          <div class="top-select-date">
            <el-checkbox-group v-model="holidayList" size="small">
              <el-checkbox-button v-for="(item,index) in nextDateList" @change="sortDateList" :label="item.year+'-'+item.month+'-'+item.date" :key="index">
                <span class="day">{{ item.day }}</span>
                <span class="date">{{ item.date }}</span>
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button type="primary" @click="confirmHoliday()">确 定</el-button>
      </div>
    </el-dialog>
    <!--    用作删除的弹框-->
    <delete-dialog :dialog="deleteDialog" ref="deleteDialog"></delete-dialog>
  </div>
</template>

<script>
import {getMassageInfo} from "@/api/massage";
import {getDoctorDepartmentList} from "@/api/departmentSetUp";
import {getOutpatientByMassage} from "@/api/outpatient";
import {tips} from "@/common/js/optionTips";
import {addOutCall, deleteOutCallById, getAllOutCallList, holiday, updateOutCall} from "@/api/outCall";
import {dateFormYMD} from "@/common/js/dateFormYMD";
import {getDoctorById} from "@/api/doctor";
import {getTreatRoom} from "@/api/treatRoom";
import {DateToTime, getDay, numToWord, turnDouble, wordToNum} from "@/common/js/timeFilters";

export default {
  name: "setUpDetail",
  data() {
    return {
      //当前请假医生id
      currentHolidayDoctorId:'',
      //请假List
      holidayList:[],
      //本周7天
      //数据格式
      // [
      //   {
      //     date:14,
      //     day:'三',
      //     month:'06',
      //     year:2023,
      //   }
      // ]
      dateList:[],
      //下周7天
      nextDateList:[],
      // 是否显示请假窗口
      showHoliday:false,
      // 请假日期
      holiday:'',
      // 当前选择的店铺地址(万达店)
      selectAddress:'',
      // 地址选择框
      addressOption:[],
      // 记录当前是否是修改
      isEdit: false,
      // 当前选择时间段下标
      currentIndex: 0,
      // 是否显示添加时间段按钮
      isShowAddTimeButton: true,
      // 是否显示添加时间段组件
      isShowAddTimePeriod: false,
      // 是否显示修改时间段组件
      isShowChangeTimePeriod: false,
      // 选择时间段
      timePeriod: [new Date(2023, 4, 26, 8, 0), new Date(2023, 4, 26, 9, 0)],
      // 更改时间段 用于编辑时间段回显数据
      timePeriod1: [],
      // 出诊日期多选框
      selectedVisitCallDate: [],
      // 出诊时间段多选框
      selectedVisitCallTime: [],
      // 这里使用两个数组分来来存储两个多选框的勾选情况，不能共用一个，因为公用会混淆且会出现两个多选框勾选一样的情况
      // 上面的下拉框的店铺的数据
      massageData: [],
      selectMassageID: 0,
      // 顶部的专科信息
      departmentSelectData: [],
      selectDepartmentID: 0,
      // 下拉框门诊数据
      outpatientSelectData: [],
      selectOutpatientID: 0,
      // 顶部下拉框的日期的数据
      dateOutCall: new Date(),
      // 添加出诊的日期(星期几)
      day: '',
      // 添加出诊的时间段
      duan: '',
      // 请假时间段
      jia: '',
      // 编辑时间段的表格数据
      timePeriodTableData: {
        dataNull: false,
        tableTitle: [{
          prop: 'timePeriod',
          label: '时间段',
          width: '250',
          option: ''
        }],
        tableData: [],
        option: {
          width: '50',
          button: [{
            size: 'mini',
            type: 'success',
            name: '编辑'
          }, {
            size: 'mini',
            type: 'danger',
            name: '删除'
          }]
        }
      },
      // 表格数据
      tableAllData: {
        dataNull: false,
        tableTitle: [{
          prop: 'ID',
          label: '编号',
          width: '70',
          option: ''
        }, {
          prop: 'doctorId',
          label: '师傅ID',
          width: '80',
          option: ''
        }, {
          prop: 'doctorName',
          label: '师傅姓名',
          width: '80',
          option: ''
        }, {
          prop: 'address',
          label: '店铺',
          width: '150',
          option: ''
        }, {
          prop: 'date',
          label: '每周',
          width: '150',
          option: ''
        }, {
          prop: 'time',
          label: '时间段',
          width: '280',
          option: ''
        }],
        tableData: [],
        option: {
          width: '150',
          button: [
            {
            size: 'mini' ,
            type: 'warning',
            name:'请假'
            }
            ,{
            size: 'mini',
            type: 'success',
            name: '编辑'
          }, {
            size: 'mini',
            type: 'danger',
            name: '删除'
          }]
        }
      },
      // 店铺地址的下拉框
      sentTableData: {
        address: [],
      },
      // 选择出诊日期(星期)
      visitCallDate: {
        date: [
          {
            ID: 1,
            name: '星期一'
          },
          {
            ID: 2,
            name: '星期二'
          },
          {
            ID: 3,
            name: '星期三'
          },
          {
            ID: 4,
            name: '星期四'
          },
          {
            ID: 5,
            name: '星期五'
          },
          {
            ID: 6,
            name: '星期六'
          },
          {
            ID: 7,
            name: '星期天'
          },
        ],
      },
      // 选择出诊时间段
      visitCallTime: {
        date: [
          {
            ID: 1,
            time: '08:40-09:20'
          },
          {
            ID: 2,
            time: '09:20-10:00'
          },
          {
            ID: 3,
            time: '10:00-10:40'
          },
          {
            ID: 4,
            time: '10:40-11:20'
          },
          {
            ID: 5,
            time: '11:20-12:00'
          },
          {
            ID: 6,
            time: '14:00-14:40'
          },
          {
            ID: 7,
            time: '14:40-15:20'
          },
          {
            ID: 8,
            time: '15:20-16:00'
          },
          {
            ID: 9,
            time: '16:00-16:40'
          },
          {
            ID: 10,
            time: '16:40-17:20'
          },
          {
            ID: 11,
            time: '17:20-18:00'
          },
          {
            ID: 12,
            time: '18:00-18:40'
          }

        ],
        // 储存修改时间段回显的数据
        editDate: []
      },
      // 添加模态框的
      dialogFormVisible: false,
      doctorSelectData: [],// 添加出诊计划时的师傅信息列表
      selectDoctorID: '',
      selectOutCallID: '', // 选择的诊室的id
      selectTimeID: 1,     // 选择的时间的id
      // 底部分页的数据
      pageList: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      // 删除的模态框的数据
      deleteDialog: {
        title: '',
        dialogFormVisible: false,
        id: '',
        isTimePeriod: false
      },
      deleteScope: {}, // 用作当从组件传过来确认删除时用的
      isLoading: false,
      // 修改时间段模态框
      editTimePeriodDialog: false,
      // 修改模态框的
      updateDialog: false,
      updateForm: {}
    }
  },
  methods: {
    //对holidayList里面的时间段进行排序
    sortDateList:function (){
        this.holidayList = this.holidayList.sort((a, b) => {
         return a < b ? -1 : 1;
       });
    },
    // 请假
    confirmHoliday:function (){
      //拼接字符串
      let holidayString = this.holidayList.toString()
      //调用请假接口
      let data = {
        doctorId:this.currentHolidayDoctorId,
        jia:holidayString
      }
      holiday(data).then(res=>{
        if(res.code === 200){
          tips('success','请假成功')
          this.cancelModal()
          //重新获取出诊信息
          this.getAllOutCallList()
        }
      }).catch(()=>{
        tips('error','请假失败,请检查网络')
        this.cancelModal()
      })
    },
    // 获取今天日期
    getCurrentDay:function (){
      //let currentDay = new Date('Tue Jun 17 2023 15:27:08 GMT+0800')
      let currentDay = new Date()
      this.dateList = []
      this.nextDateList = []
      // 先将今天的号数存进去
      this.dateList.push({
        date: turnDouble(currentDay.getDate()),
        day: getDay(currentDay.getDay()),
        year: currentDay.getFullYear(),
        month: turnDouble(currentDay.getMonth() + 1)
      })
      // 将剩下的6天的号数也存进去
      for(let i=0;i<6;i++) {
        currentDay.setDate(currentDay.getDate() + 1)
        this.dateList.push({
          date: turnDouble(currentDay.getDate()),
          day: getDay(currentDay.getDay()),
          year: currentDay.getFullYear(),
          month: turnDouble(currentDay.getMonth() + 1)
        })
      }
      //接下来存下周的
      currentDay.setDate(currentDay.getDate()+1)
      this.nextDateList.push({
        date: turnDouble(currentDay.getDate()),
        day: getDay(currentDay.getDay()),
        year: currentDay.getFullYear(),
        month: turnDouble(currentDay.getMonth() + 1)
      })
      // 将下周剩下的6天的号数也存进去
      for(let i=0;i<6;i++) {
        currentDay.setDate(currentDay.getDate() + 1)
        this.nextDateList.push({
          date: turnDouble(currentDay.getDate()),
          day: getDay(currentDay.getDay()),
          year: currentDay.getFullYear(),
          month: turnDouble(currentDay.getMonth() + 1)
        })
      }
    },
    //格式化日期
    formatHoliday:function (){
      this.holiday = dateFormYMD(this.holiday)
    },
    //添加师傅出诊的时候判断是否已经有记录了
    isExist: function (name) {
      let arr = this.tableAllData.tableData;
      for(let i=0;i<this.tableAllData.tableData.length;i++){
        if(arr[i].doctorName === name){
          return true;
        }
      }
      return false;

    },
    //点击添加时间段按钮，添加时间段控件的显示与消失
    changeIsShowAddTimePeriod() {
      this.isShowAddTimePeriod = !this.isShowAddTimePeriod
    },
    //添加时间段
    editTimePeriod(state) {
      //点击之后打开修改时间段的模态框
      this.editTimePeriodDialog = true
      this.timePeriodTableData.tableData = []
      let that = this
      if (state === 'date') {
        this.visitCallTime.date.forEach(function (item) {
          //console.log(item.time)
          that.timePeriodTableData.tableData.push({
            timePeriod: item.time
          })
        })
      } else if (state === 'editDate') {
        this.visitCallTime.editDate.forEach(function (item) {
          //console.log(item.time)
          that.timePeriodTableData.tableData.push({
            timePeriod: item.time
          })
        })
      }

    },
    // 选择时间段组件点击确定后触发的事件
    addTimePeriod() {
      //this.timePeriodTableData.tableData
      this.isShowAddTimePeriod = !this.isShowAddTimePeriod
      //console.log(DateToTime(this.timePeriod[0],'hour'),DateToTime(this.timePeriod[1],'hour'))
      //如果isEdit是false代表当前是编辑时间段
      if (!this.isEdit) {
        //添加时间段
        this.visitCallTime.date.push({
          ID: this.visitCallTime.date.length + 1,
          time: DateToTime(this.timePeriod[0], 'hour') + '-' + DateToTime(this.timePeriod[1], 'hour')
        })
        //如果isEdit是true则代表当前是修改时间段
      } else if (this.isEdit) {
        this.visitCallTime.editDate.push({
          ID: this.visitCallTime.date.length + 1,
          time: DateToTime(this.timePeriod[0], 'hour') + '-' + DateToTime(this.timePeriod[1], 'hour')
        })
      }
      this.timePeriodTableData.tableData.push({
        timePeriod: DateToTime(this.timePeriod[0], 'hour') + '-' + DateToTime(this.timePeriod[1], 'hour')
      })

      // 进行添加了时间段进行排序的
      this.timePeriodTableData.tableData = this.timePeriodTableData.tableData.sort((a, b) => {
        return a.timePeriod < b.timePeriod ? -1 : 1;
      });

      //console.log("this.timePeriodTableData.tableData:", this.timePeriodTableData.tableData)
      tips('success', '添加成功')
      //时间段排序
      //console.log(this.visitCallTime.date)
      this.timePeriod = ''
    },
    // 修改时间段组件点击确认后触发的事件
    changeTimePeriod() {
      this.isShowChangeTimePeriod = false
      this.isShowAddTimePeriod = false
      this.isShowAddTimeButton = true
      //修改时间段
      let time = DateToTime(this.timePeriod1[0], 'hour') + '-' + DateToTime(this.timePeriod1[1], 'hour')
      console.log('time:   ' + time)
      //isEdit为false代表当前是添加时间段
      if (!this.isEdit) {
        this.visitCallTime.date.splice(this.currentIndex, 1, {ID: this.visitCallTime.date.length + 1, time: time})
      } else if (this.isEdit) {
        this.visitCallTime.editDate.splice(this.currentIndex, 1, {ID: this.visitCallTime.date.length + 1, time: time})
      }
      //isEdit为true代表当前是修改时间段
      this.timePeriodTableData.tableData.splice(this.currentIndex, 1, {timePeriod: time})
      tips('success', '修改成功')
      //console.log(this.timePeriodTableData.tableData)
      //显示改变时间段控件
    },
    //保存添加的时间段
    saveEditTimePeriod() {
      //关闭模态框
      this.editTimePeriodDialog = false
    },
    //师傅出诊日期多选框
    selectAll() {
      if (this.selectedVisitCallDate.length < this.visitCallDate.date.length) {
        this.selectedVisitCallDate = []
        this.visitCallDate.date.map((item) => {
          this.selectedVisitCallDate.push(item.ID)
        })
        this.selectedVisitCallDate.unshift('全选')
        //console.log(this.selectedVisitCallDate)
      } else {
        this.selectedVisitCallDate = []
      }
    },
    changeSelect(val) {
      console.log(val)
      if (!val.includes('全选') && val.length === this.visitCallDate.date.length) {
        this.selectedVisitCallDate.unshift('全选')
        //console.log(this.selectedVisitCallDate)
      } else if (val.includes('全选') && (val.length - 1) < this.visitCallDate.date.length) {
        this.selectedVisitCallDate = this.selectedVisitCallDate.filter((item) => {
          //console.log(this.selectedVisitCallDate)
          return item !== '全选'
        })
      }
    },
    removeTag(val) {
      if (val === '全选') {
        this.selectedVisitCallDate = []
      }
    },
    //师傅出诊时间段多选框
    selectAll1() {
      if (this.selectedVisitCallTime.length < this.visitCallTime.date.length) {
        this.selectedVisitCallTime = []
        this.visitCallTime.date.map((item) => {
          this.selectedVisitCallTime.push(item.time)
        })
        this.selectedVisitCallTime.unshift('全选')
        console.log(this.selectedVisitCallTime)
      } else {
        this.selectedVisitCallTime = []
      }
    },
    changeSelect1(val) {
      if (!val.includes('全选') && val.length === this.visitCallTime.date.length) {
        this.selectedVisitCallTime.unshift('全选')
      } else if (val.includes('全选') && (val.length - 1) < this.visitCallTime.date.length) {
        this.selectedVisitCallTime = this.selectedVisitCallTime.filter((item) => {
          return item !== '全选'
        })
      }
    },
    removeTag1(val) {
      if (val === '全选') {
        this.selectedVisitCallTime = []
      }
    },
    // 添加日期和时间段的表格的按钮点击事件
    getTableData: function (option) {
      if (option.buttonName === '编辑') {
        this.isEdit = true
        //console.log(option)
        let that = this
        this.updateForm = option.scopeRow;
        const data = this.updateForm;
        //将要修改的师傅的出诊时间段和日期传给多选框,回显已经选择的时间段和日期
        //先以逗号分隔
        let arr1 = data.time.split(',')
        let arr2 = data.date.split(',')
        arr1.forEach(function (item, index) {
          that.selectedVisitCallTime.push(item)
          that.visitCallTime.editDate.push({
            ID: index + 1,
            time: item
          })
        })
        arr2.forEach(function (item) {
          that.selectedVisitCallDate.push(wordToNum(item))
        })
        this.updateDialog = true;
      } else if (option.buttonName === '删除') {
        //console.log(option)
        this.deleteDialog.isTimePeriod = false;
        this.deleteScope = option; // 将删除的数据存起来
        this.deleteDialog.dialogFormVisible = true; // 打开删除弹窗
        this.deleteDialog.title = '出诊计划';  //删除模态框的标题
        this.deleteDialog.id = option.scopeRow.ID; // 发送删除id
      }else if(option.buttonName === '请假'){
        this.currentHolidayDoctorId = option.scopeRow.doctorId
        this.showHoliday = true
        //首先分割请假时间段
        //先以逗号分割出每个完整时间段  2023-06-14
        if(option.scopeRow.holiday === null || option.scopeRow.holiday === ''){
          return;
        }
        this.holidayList = option.scopeRow.holiday.split(',')
      }
    },
    // 修改时间段的表格的按钮的点击事件
    getTableData1: function (option) {
      this.currentIndex = option.scopeIndex
      //option含有属性：scopeIndex 代表下标 从0开始
      if (option.buttonName === '编辑') {
        this.timePeriod1 = []
        //获取时间段，用于回显编辑时间段
        const data = option.scopeRow;
        //console.log('data: '+data.timePeriod)
        //关闭添加时间段按钮和添加时间段控件
        this.isShowAddTimePeriod = false
        this.isShowAddTimeButton = false
        //显示改变时间段控件
        this.isShowChangeTimePeriod = true
        let arr = data.timePeriod.split('-')//短横杠分隔 08:00-09:00 => 08:00,09:00 => 08,00,09,00
        let arr1 = [];
        arr1 [0] = arr[0].split(':')//冒号分隔 08:00 => 08,00
        arr1 [1] = arr[1].split(':')
        this.timePeriod1.push(
          new Date(2023, 4, 27, arr1[0][0], arr1[0][1]),
          new Date(2023, 4, 27, arr1[1][0], arr1[1][1])
        )
      } else if (option.buttonName === '删除') {
        //console.log(option)
        this.deleteScope = option; // 将删除的数据存起来
        this.deleteDialog.dialogFormVisible = true; // 打开删除弹窗
        this.deleteDialog.title = '时间段'; // 模态框标题
        this.deleteDialog.id = option.scopeRow.timePeriod
        this.deleteDialog.isTimePeriod = true;// 删除时间段

        // this.visitCallTime.date.splice(this.currentIndex, 1)
        // this.timePeriodTableData.tableData.splice(this.currentIndex, 1,)
        // tips('success', '删除成功')
      }
    },
    // 删除列表中的某一条数据
    deleteData: function () {
      deleteOutCallById(this.deleteScope.scopeRow.ID).then(res => {
        if (res.code === 200) {
          this.deleteDialog.dialogFormVisible = false;
          this.$refs.tableList.deleteData(this.deleteScope.scopeIndex)
        }
      }).catch(() => {
        tips('error', '删除失败')
      });
    },
    // 点击了修改按钮
    handleUpdate: function () {
      const data = this.updateForm;
      this.isLoading = true;
      //若当前多选框里含有'全选'
      if (this.selectedVisitCallDate.includes('全选')) {
        //删除数组第一个元素
        this.selectedVisitCallDate.shift()
      }
      if (this.selectedVisitCallTime.includes('全选')) {
        this.selectedVisitCallTime.shift()
      }

      updateOutCall(data.ID, {
        clinicId: data.clinicId,
        day: this.selectedVisitCallDate.toString(),
        doctorId: data.doctorId,
        duan: this.selectedVisitCallTime.toString(),
        massageId: this.selectMassageID,
        outpatientId: this.selectOutpatientID,
        specialId: this.selectDepartmentID,
        time: 1
      }).then(res => {
        if (res.code === 200) {
          this.getAllOutCallList();
          this.updateDialog = false;
        }
        this.isLoading = false;
      }).catch(() => {
        this.isLoading = false;
        tips('error', '更新出诊计划失败')
      })
      // this.$refs.tableList.handleUpdate()
    },
    // 点击添加出诊日期
    addOutCall: function () {
      this.isLoading = true;
      //若当前多选框里含有'全选'
      if (this.selectedVisitCallDate.includes('全选')) {
        //删除数组第一个元素
        this.selectedVisitCallDate.shift()
      }
      if (this.selectedVisitCallTime.includes('全选')) {
        this.selectedVisitCallTime.shift()
      }
      addOutCall({
        clinicId: this.selectOutCallID,
        day: this.selectedVisitCallDate.toString(),
        doctorId: this.selectDoctorID,
        duan: this.selectedVisitCallTime.toString(),
        massageId: this.selectMassageID,
        jia: '',
        outpatientId: this.selectOutpatientID,
        specialId: this.selectDepartmentID,
        time: 1
      }).then(res => {
        //console.log(this.dateOutCall)
        if (res.code === 200) {
          this.isLoading = false;
          this.getAllOutCallList();
          tips('success', '添加成功')
        }
        //关闭模态框
        this.cancelModal()
      }).catch(() => {
        this.isLoading = false;
        tips('error', '添加失败')
      })
    },
    // 关闭添加出诊日期和时间段模态框
    cancelModal: function () {
      //关闭模态框将多选框置空
      this.selectedVisitCallTime = [];
      this.selectedVisitCallDate = [];
      this.visitCallTime.editDate = [];
      this.dialogFormVisible = false;
      this.deleteDialog.dialogFormVisible = false;
      this.updateDialog = false;
      this.selectDoctorID = '';
      //关闭请假窗口
      this.showHoliday = false
      //清空请假list
      this.holidayList = []
    },
    // 关闭编辑时间段的模态框
    cancelModal1: function () {
      this.editTimePeriodDialog = false;
    },
    // 获取所有店铺
    getMassageInfo: function () {
      this.massageData = [];
      this.addressOption = [];
      getMassageInfo(1, 50, '').then(res => {
        if (res.code === 200 && res.data.list.length > 0) {
          this.addressOption.push({
            value: res.data.list[0].address,
            label: res.data.list[0].address
          })
          this.massageData = res.data.list;
          this.selectMassageID = res.data.list[0].id;
          this.getMassageDepartmentList()
        }
      }).catch(() => {
        tips('error', '获取店铺信息失败');
      })
    },
    // 获取店铺的专科列表
    getMassageDepartmentList: function () {
      this.departmentSelectData = [];
      getDoctorDepartmentList(this.selectMassageID, 1, 50)
        .then(res => {
          if (res.code === 200) {
            if (res.data.list !== null) {
              this.departmentSelectData = res.data.list;
              this.selectDepartmentID = res.data.list[0].id;
              this.getOutpatientByMassage()
            }
          }
        }).catch(() => {
        tips('error', '获取专科列表失败')
      })
    },
    // 获取门诊列表
    getOutpatientByMassage: function () {
      this.outpatientSelectData = [];
      getOutpatientByMassage(this.selectMassageID, this.selectDepartmentID, 1, 50).then(res => {
        if (res.code === 200) {
          const data = res.data.list;
          if (res.data.list.length > 0) {
            this.outpatientSelectData = data;
            this.selectOutpatientID = data[0].id;
            this.getAllOutCallList()
          }
        }
      }).catch(() => {
        tips('error', '获取门诊信息失败')
      })
    },
    // 获取列表数据，师傅排版的数据
    getAllOutCallList: function () {
      this.tableAllData.tableData = [];
      //获取师傅出诊记录
      getAllOutCallList(dateFormYMD(this.dateOutCall), this.pageList.pageNum, this.pageList.pageSize,
        this.selectMassageID, this.selectDepartmentID, this.selectOutpatientID).then(res => {
        console.log(res.data)
        if (res.code === 200) {
          this.pageList = {
            pageNum: res.data.pageNum,
            pageSize: res.data.pageSize,
            total: res.data.total
          };
          const data = res.data.list;
          let that = this;
          if (data.length === 0){
            this.tableAllData.dataNull = true;
            return;
          }
          if (data.length > 0) {
            data.forEach(function (item, index) {
              //将日期分隔
              let date = item.day.split(',')
              let date1 = numToWord(date[0])
              for (let i = 1; i < date.length; i++) {
                date1 = date1 + ',' + numToWord(date[i])
              }
              that.tableAllData.tableData.push({
                ID: item.id,
                doctorId: item.doctorId,
                doctorName: item.doctorName,
                address: item.clinicName,
                clinicId: item.clinicId, // 用于修改的时候的诊室的id
                time: item.duan,
                date: date1,
                timeId: item.time,
                holiday:item.jia
              })
            });
            this.tableAllData.dataNull = false;
          }
          this.getDoctorList()
        }
      }).catch((e) => {
        tips('error', e + '获取出诊列表失败')
      })
    },
    // 获取该专科门诊的师傅
    getDoctorList: function () {
      this.doctorSelectData = [];
      getDoctorById(this.selectMassageID,'',this.pageList.pageNum,this.pageList.pageSize).then(res => {
        if (res.code === 200){
          this.doctorSelectData = res.data.list
          this.getTreatRoom()
        }
      })
      // getDoctorList(this.selectDepartmentID, this.selectOutpatientID, 1, 100, '').then(res => {
      //   if (res.code === 200) {
      //     if (res.data.list.length > 0) {
      //       this.doctorSelectData = res.data.list;
      //       // this.selectDoctorID = this.doctorSelectData[0].id
      //       this.getTreatRoom()
      //     }
      //   }
      // }).catch(() => {
      //   tips('error', '获取所属师傅列表失败')
      // })
    },
    // 获取门诊的诊室信息
    getTreatRoom: function () {
      this.sentTableData.address = [];
      getTreatRoom(this.selectOutpatientID, 1, 100).then(res => {
        if (res.code === 200) {
          this.sentTableData.address = res.data.list;
          this.selectOutCallID = this.sentTableData.address[0].id
        }
      }).catch(() => {
        tips('error', '获取诊室信息失败')
      })
    },
    // 子组件分页通过调用父组件的方法进行调用更新表格
    fatherMethod: function (pageNum, pageSize) {
      this.pageList.pageNum = pageNum;
      this.pageList.pageSize = pageSize;
      this.getAllOutCallList()
    }

  },
  mounted() {
    this.getCurrentDay()
    this.getMassageInfo()
  }
}
</script>

<style scoped lang="scss">
@import "../.././common/scss/common.scss";
// 顶部选择日期
.top-select-date {
  width: 100%;
  height: 80px;
  align-items: center;
  border-bottom: 1px solid #F0F0F0;

  .box {
    width: 25%;
    height: 85%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;

    .date .day .icon {
      width: 100%;
      height: 50%;
      display: flex;
    }

    .day {
      align-items: flex-start;
      font-size: 16px;
      font-weight: 500;
      color: #A6A6A6;
    }

    .date {
      align-items: flex-end;
      font-size: 16px;
      font-weight: 500;
      color: #000000;
    }

    .icon {
      width: 50px;
      height: 50px;
    }
  }

  .box:not(:last-child) {
    border-right: 1px solid #F0F0F0;
  }
}
.out-box {

  @include width-margin(90%, 100%);

  .top-row-box {
    width: 100%;
    height: 100%;
    @include flex-direction(row);
    align-items: center;
    flex-wrap: wrap;

    .margin-right {
      margin-right: 30px;
    }
  }
}

.button-table-box {
  @include width-margin(100%, 100%);
  margin-top: 15px;
}
</style>
